<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>添加商品</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.picker.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.poppicker.css"/>
    <style type="text/css">
    	.mui-content>p{
    		position: relative;
    		padding: 30px 15px;
    		background: #fff;
    		margin: 15px 0 0 0;
    		color: #333;
    		text-align: center;
    	}
    	.mui-content p:after{
    		content: '';
    		background: #65d4a3;
    		height: 1px;
    		width: 100%;
    		position: absolute;
    		left: 0;
    		bottom: 0;
    	}
    	.mui-content>div{
    		background: #fff;
    	}
    	.mui-content form{
    		padding: 20px 0;
    	}
    	#sub{
    		width: 100% !important;
    	}
    	.mui-row{
    		padding: 20px 50px 0 50px;
    	}
    	input[type="file"]{
    		display: none;
    	}
    	.file_name{
    		display: inline-block;
    		width: 40%;
    		height: 100%;
    		line-height: 38px;
    		padding-left: 10px;
    	}
    </style>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav">
		<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">添加商品</h1>
	</header>
    
    <div class="mui-content id">

		<p>商品图片可以自行安排张数</p>
		<div>
			<form class="mui-input-group" action="" method="post" enctype="multipart/form-data">
				<div class="mui-input-row">
					<label class="name">商品名称</label>
					<input type="text" class="mui-input-clear n_name" name="goods_name" placeholder="请输入商品名称">
				</div>
				<div class="mui-input-row">
					<label class="name">市场售价</label>
					<input type="number" class="mui-input-clear n_name" name="market" placeholder="请输入市场售价">
				</div>
				<div class="mui-input-row">
					<label class="name">本店售价</label>
					<input type="number" class="mui-input-clear n_name" name="shop" placeholder="请输入本店售价">
				</div>
				<div class="mui-input-row">
					<label class="name">简单描述</label>
					<input type="text" class="mui-input-clear n_name" name="brief" placeholder="请输入简单描述">
				</div>
				<div class="mui-input-row">
					<label class="name">详细描述</label>
					<input type="text" class="mui-input-clear n_name" name="desc" placeholder="请输入详细描述">
				</div>
				<div class="mui-input-row">
					<label class="name">库存数量</label>
					<input type="number" class="mui-input-clear n_name" name="num" placeholder="请输入库存数量">
				</div>
				<div class="mui-input-row">
					<label class="name">所属分类</label>
					<input type="text" class="mui-input-clear n_name" id="cate" placeholder="请点击选择所属分类">
					<input type="hidden" name="navs" id="" value="" />
				</div>
				<div class="mui-row">
					<div class="mui-text-center">
						<div>轮播图</div>
						<p>除首张放多少张自己定(正方形，最好长宽一样，不能大于2M)</p>
					</div>
				</div>
				<div class="mui-input-row">
					<label class="name">首张</label>
					<input type="file" name="noone" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第二张</label>
					<input type="file" name="notwo" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第三张</label>
					<input type="file" name="onthree" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第四张</label>
					<input type="file" name="onfive" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第五张</label>
					<input type="file" name="myfile" class="" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-row">
					<div class="mui-text-center">
						<div>展示图</div>
						<p>放多少张自己定，图片不能大于2M</p>
					</div>
				</div>
				<div class="mui-input-row">
					<label class="name">第一张</label>
					<input type="file" name="mone" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第二张</label>
					<input type="file" name="mtwo" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第三张</label>
					<input type="file" name="mthree" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第四张</label>
					<input type="file" name="mfove" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<label class="name">第五张</label>
					<input type="file" name="mfive" accept="image/*" />
					<button type="button" class="change_file">选择图片</button>
					<span  class="file_name mui-ellipsis"></span>
				</div>
				<div class="mui-input-row">
					<button type="button" id="sub" class="mui-btn mui-btn-primary">提交</button>
				</div>
			</form>
		</div>
    </div>    

    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init()
    	
    	//获取分类数据
    	let picker = new mui.PopPicker()
    	$.ajax({
    		type:"get",
    		url:"test_data/cate.json",
    		async:true,
    		success(data){
				picker.setData(data)
    		}
    	});
    	
    	document.getElementById('cate').addEventListener('tap',e=>{
    		let _this = $(e.target)
    		picker.show(item=>{
    			_this.val(item[0].text)
    			_this.siblings('input[type="hidden"]').val(item[0].value)
    		})
    	})
    	
    	
    	//点击触发input
    	$('.change_file').click(function(){
    		$(this).siblings('input[type="file"]').click()
    	})
    	$('input[type="file"]').change(function(){
    		let img = this.files[0]
    		if(img.size>2097139){
    			mui.toast('请上传2M以内的文件')
    			$(this).val('')
    			return false
    		}
    		$(this).siblings('.file_name').text(img.name)
    		$(this).siblings('.change_file').addClass('mui-btn-green').text('重新选择')
    	})
    	
    	//提交数据
    	$('#sub').click(()=>{
    		let check = true
    		$('.n_name').each((i,v)=>{
    			if($(v).val()==''){
    				mui.toast(`请填写${$(v).siblings('.name').text()}`)
    				check = false
    				return false
    			}
    		})
    		if(check){
    			$('form').submit()
    		}
    	})
    </script>
</body>
</html>
